<template>
  <header>
    <!-- <topTime></topTime> -->
    <div
      class="top"
      :style="{
        backgroundImage: 'url(' + srcImgUrl + ')',
        backgroundRepeat: 'no-repeat',
      }"
    >
      <div class="tt">
        <div class="timer">今天的时间是：{{ FormatTime(nowTime) }}</div>
      </div>

      <div class="top-container">
        <div class="topname-cn">滁州市农产品价格监控与展示系统</div>
        <div class="topname-en">
          Chuzhou Agricultural Products Price Monitoring and Display System
        </div>
      </div>
    </div>
    <div class="navbar">
      <div class="nav">
        <router-link to="/home" class="el-icon-menu">首页</router-link>
        <router-link to="/price" class="el-icon-shopping-bag-1"
          >最新报价</router-link
        >
        <router-link to="/priceIndice" class="el-icon-pie-chart"
          >价格指数</router-link
        >
        <router-link to="/quote" class="el-icon-coin"
          >价格行情</router-link
        >
        <router-link to="/report" class="el-icon-reading"
          >分析报告</router-link
        >
        <router-link to="/news" class="el-icon-document-copy"
          >新闻资讯</router-link
        >
        <router-link to="/market" class="el-icon-school"
          >市场简介</router-link
        >
      </div>
    </div>
  </header>
</template>

<script>
//顶部时间
import GetTime from "@/components/header/GetTime";

export default {
  name: "Header",
  components: { GetTime },
  data() {
    return {
      timer: undefined,
      nowTime: new Date(),
      latedata: "2022-10-1",
      srcImgUrl: 'http://47.92.118.35:9000/imges/chzu.png',
    };
  },
  created() {
    // 显示时间，在渲染页面之前一直调用该函数，对this.time进行赋值
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString();
    });
  },
  // 销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

  methods: {
    FormatTime() {
      //返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var weekday = date.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[weekday];
      return `${year}-${month}-${day} ${week}`;
    },
    formatTime(n) {
      //判断是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
  },
};
</script>
<style scoped lang="less">
* {
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  margin: 0 auto;
}

.top > img {
  display: block;
  width: 100%; // 当只设置宽或高是，会自动按原比例缩放
}
.top {
  max-width: 100%;
  background: no-repeat;
  background-size: cover;
  background-position: 100% 72%;
  border-radius: 20px 20px 0 0;
}

.tt {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.timer {
  color: rgb(255, 255, 255);
  font-style: italic;
  font-weight: bold;
  width: 90%;
  margin: 0 auto;
}

.top-container {
  width: 100%;
  height: 120px;
  text-align: center;
}

.topname-cn {
  padding-top: 20px;
  // color: rgb(0, 0, 0);
  color: white;
  font-size: 40px;
  font-weight: bold;
}

.topname-en {
  color: white;
}

// 先将a标签变成白色
a {
  color: #fff;
}

a:hover {
  background: rgb(8, 130, 106);
}

.router-link-active {
  background: rgb(224, 253, 248) !important;
  color: rgb(10, 163, 133);
}

.navbar {
  background: rgb(10, 163, 133);

  .nav {
    letter-spacing: 1px;
    display: block;
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;

    &:after {
      content: "";
      clear: both;
      display: block;
    }

    a {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      width: 15%;
      height: 48px;
      line-height: 48px;
      text-decoration: none;
      list-style: none;
      cursor: pointer;
    }
  }
}
</style>